window.onload = function() {
  init();
};
var init = function() {
  initToDoList();
};
var initToDoList = (function() {
  return function() {
    var showInputBtn = document.getElementsByClassName('j-plus-btn')[0],
      inputWrap = document.getElementsByClassName('input-wrap')[0],
      textInput = document.getElementById('textInput'),
      addItem = document.getElementsByClassName('j-add-item')[0],
      oList = document.getElementsByClassName('j-list')[0],
      oItems = oList.getElementsByClassName('item'),
      isShow = false,
      isEdit = false,
      curIdx = null;
    
    addEvent(showInputBtn, 'click', function() {
      if (isShow) {
        restoreStatus();
        restoreItemClassName();
        showInput('close');
      } else {
        showInput('open');
      }
      textInput.focus();
    });
    
    addEvent(addItem, 'click', function() {
      var content = textInput.value,
        contentLen = content.length;
      if (contentLen <= 0) { return;}
      
      for (var i = 0; i < contentLen; i++) {
        var item = oItems[i];
        if (item === content) {
          alert('事项已经存在');
          return;
        }
      }
      if (isEdit) {
        var itemContent = elemChildren(oItems[curIdx])[0];
        itemContent.innerText = textInput.value;
        restoreItemClassName();
      } else {
        var oLi = document.createElement('li');
        oLi.className = 'item';
        oLi.innerHTML = itemTpl(textInput.value);
        oList.appendChild(oLi);
      }
      showInput('close');
      restoreStatus();
    });
    
    addEvent(oList, 'click', function(e) {
      var e = e || window.event,
        tar = e.target || e.srcElement,
        oParent = elemParent(tar, 2);
      if (tar.className === 'edit-btn') {
        // 编辑
        restoreItemClassName(); // 恢复 li 的 className
        oParent.className += ' active';
        curIdx = Array.prototype.indexOf.call(oItems, oParent);
        addItem.innerText = '编辑第' + (curIdx + 1) + '项';
        isEdit = true;
        showInput('open');
        textInput.focus();
      } else if (tar.className === 'remove-btn') {
        // 删除
        oParent.remove();
        showInput('close');
        restoreStatus();
      }
    });
    
    function itemTpl(text) {
      return `
        <p class="item-content">${text}</p>
        <div class="btn-group">
          <a class="edit-btn" href="javascript:">编辑</a>
          <a class="remove-btn" href="javascript:">删除</a>
        </div>
      `;
    }
    
    function showInput(action) {
      if (action === 'open') {
        isShow = true;
        inputWrap.style.display = 'block';
      } else if (action === 'close') {
        isShow = false;
        inputWrap.style.display = 'none';
      }
    }
    
    function restoreItemClassName() {
      var itemLen = oItems.length, i;
      for (i = 0; i < itemLen; i++) {
        oItems[i].className = 'item';
      }
    }
    
    function restoreStatus() {
      isEdit = false;
      curIdx = null;
      textInput.value = '';
      addItem.innerText = '新增事项';
    }
  };
}());
